<template>
	<view class="details">
		<!-- S 顶部栏 -->
		<sol-navbar>
			<view slot="right">
				<view class="details-navbar">
					<sol-avatar :src="detailInfo.user.avatar" :size="64"></sol-avatar>
					<image class="details-navbar_icon" src="/static/icon-default/icon_subscribe.png" mode="scaleToFill">
					</image>
					<image class="details-navbar_icon" src="/static/icon-default/icon_more_spot.png" mode="scaleToFill">
					</image>
				</view>
			</view>
		</sol-navbar>
		<!-- E 顶部栏 -->

		<!-- S 标题 -->
		<view class="details-title" v-text="detailInfo.title">标题</view>
		<!-- E 标题 -->

		<!-- S 发布状态 -->
		<view class="details-publish">
			<image class="details-publish_icon" :src="`/static/icon-dynamic/icon_${detailInfo.publishState}.png`"
				mode="scaleToFill">
			</image>
			<text class="details-publish_text" v-text="detailInfo.user.nickname">昵称</text>
			<text class="details-publish_text"> · 更新于{{detailInfo.publishTime || '刚刚'}}</text>
		</view>
		<!-- E 发布状态 -->

		<!-- S 音频播放 -->
		<view class="details-audio">
			<view class="details-audio_option">
				<view class="details-audio_time">03′56′′ - 16′24′′</view>
				<image class="details-audio_icon" src="/static/icon-dynamic/icon_audio-spend.png" mode="scaleToFill">
				</image>
			</view>
			<progress percent="40" active stroke-width="4" border-radius="12" active-color="#474e54"
				background-color="#d1d3d4" />
		</view>
		<!-- E 音频播放 -->

		<!-- S 内容 -->
		<view class="details-content" v-text="detailInfo.content">内容</view>
		<!-- E 内容 -->

		<!-- S 生命时间 -->
		<view class="details-life">
			<image class="details-life_icon" :src="`/static/icon-dynamic/icon_${detailInfo.lifeState}.png`"
				mode="scaleToFill"></image>
			<text class="details-life_text">这条动态将在{{detailInfo.lifeTime || '无限期'}}后消失</text>
		</view>
		<!-- E 生命时间 -->

		<!-- S 留言标签 -->
		<view class="comment-label">留言板· 1条</view>
		<!-- E 留言标签 -->

		<!-- S 留言列表 -->
		<view class="comment-list">
			<dynamic-comment-item></dynamic-comment-item>
		</view>
		<!-- E 留言列表 -->

		<!-- S 留言悬浮 -->
		<view class="comment-edit" @click="fnCommentClick('open')">
			<image class="comment-edit_icon" src="/static/icon-default/icon_edit.png" mode="scaleToFill"></image>
			<text class="comment-edit_text">我想说</text>
		</view>
		<!-- E 留言悬浮 -->

		<!-- S 弹出留言板 -->
		<sol-drawer v-model="comment.open" :custom-slot="true" @click="fnCommentClick">
			<template v-slot:default>
				<view class="comment-borad">
					<view class="comment-borad_header">
						<view class="comment-borad_header-close" @click="fnCommentClick('close')">关闭</view>
						<view class="comment-borad_header-title">留言板</view>
						<view class="comment-borad_header-send" @click="fnCommentClick('send')">发送</view>
					</view>
					<textarea class="comment-borad_content" placeholder="请输入留言信息 (120字内)" :maxlength="120"
						:show-confirm-bar="false" :cursor-spacing="64" :fixed="true" v-model="comment.content" />
				</view>
			</template>
		</sol-drawer>
		<!-- E 弹出留言板 -->

		<view class="safe-area-inset-bottom" style="height: 96rpx;"></view>
	</view>
</template>

<script>
	import {
		decodeParam
	} from "@/utils/function/codeParam.js"

	export default {
		name: "Details",
		onLoad(opt) {
			const {
				url,
				title
			} = decodeParam(opt)
			this.url = url;
			if (title) {
				uni.setNavigationBarTitle({
					title
				});
			}
		},
		data() {
			return {
				detailInfo: {
					title: '我第一次遇见你，就知道今后的生活与你有关。',
					user: {
						uid: 1,
						gender: 1,
						nickname: '华丽少小智',
						avatar: '/static/icon-default/icon_avatar.png',
					},
					content: `我第一次见到陈宇，就被他吓哭了。当时我刚搬到陈宇家隔壁，
					正拿着根棒棒糖站在花坛前，看搬家的叔叔往上抬东西，,
					妈妈在旁边指二楼最左边的窗户给我看，说那就是我们的新家。`,
					publishTime: "18时32分", // 发布时间
					publishState: "weather-night", // 发布心情状态
					lifeTime: "16小时", // 展示时间
					lifeState: "time-1", // 展示生命灯状态
					audio: {
						time: 0, // 音频时长
						src: "", // 音频来源
						type: "mp3",
					}
				},
				// 弹出留言板
				comment: {
					// 弹出
					open: false,
					// 内容
					content: "",
				}
			};
		},
		methods: {
			// 留言板点击
			fnCommentClick(type = '', value = 0) {
				this.$log(this.$options.name, type, value);
				switch (type) {
					case 'open': // 打开
						this.comment = {
							// 弹出
							open: true,
							// 内容
							content: "",
						}
						break;
					case 'close': // 关闭
						this.comment.open = false;
						break;
					case 'send':
						this.$log(this.$options.name, this.comment.content);
						break;
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	// 详情区
	.details {
		min-height: 100vh;
		background-color: $--color-background;

		// 顶部右侧操作
		&-navbar {
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			padding-right: 28rpx;

			&_icon {
				width: 48rpx;
				height: 44rpx;
				padding: 14rpx 0 14rpx 28rpx;
			}
		}

		&-title {
			font-size: 48rpx;
			font-weight: bold;
			color: #DDDDDD;
			padding: 32rpx 28rpx;
			letter-spacing: 4rpx;
		}

		// 发布状态
		&-publish {
			padding: 0 28rpx;
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;

			&_icon {
				width: 48rpx;
				height: 48rpx;
			}

			&_text {
				font-size: 28rpx;
				font-weight: 400;
				color: #878787;
				letter-spacing: 4rpx;
				margin-left: 12rpx;
			}
		}

		// 音频
		&-audio {
			background-color: #dddddd;
			padding: 28rpx;
			margin: 28rpx;
			border-radius: 18rpx;

			&_option {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 24rpx;
			}

			&_time {
				font-size: 32rpx;
				font-weight: 400;
				color: #5D5D5D;
				letter-spacing: 4rpx;
			}

			&_icon {
				width: 72rpx;
				height: 72rpx;
			}
		}

		// 内容文字
		&-content {
			font-size: 33rpx;
			font-weight: 400;
			color: #D5D5D5;
			letter-spacing: 4rpx;
			line-height: 48rpx;
			padding: 28rpx;
		}

		// 生命灯
		&-life {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			padding: 0 28rpx;

			&_icon {
				width: 42rpx;
				height: 42rpx;
			}

			&_text {
				font-size: 28rpx;
				font-weight: 400;
				color: #878787;
				margin-left: 18rpx;
				letter-spacing: 4rpx;
			}
		}
	}

	// 留言区
	.comment {
		&-label {
			font-size: 32rpx;
			font-weight: bold;
			color: #DDDDDD;
			letter-spacing: 4rpx;
			margin: 36rpx 28rpx 0;
			padding: 36rpx 0;
			border-top: 2rpx #50585e solid;
		}

		// 悬浮按钮
		&-edit {
			position: fixed;
			bottom: 56rpx;
			bottom: calc(56rpx + env(safe-area-inset-bottom));
			right: 32rpx;
			background: #474e54;
			padding: 28rpx 32rpx;
			border-radius: 48rpx;
			box-shadow: 0 4rpx 14rpx 0 #576069;
			display: inline-flex;

			&_icon {
				width: 42rpx;
				height: 42rpx;
			}

			&_text {
				font-size: 28rpx;
				font-weight: 400;
				color: #DDDDDD;
				letter-spacing: 4rpx;
				margin-left: 18rpx;
			}
		}

		// 留言板
		&-borad {
			&_header {
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;

				&-close {
					font-size: 32rpx;
					font-weight: 400;
					letter-spacing: 4rpx;
					color: #878787;
					padding: 12rpx 12px 12rpx 0;
				}

				&-title {
					letter-spacing: 6rpx;
					font-size: 36rpx;
					font-weight: bold;
					color: #DDDDDD;
					flex-grow: 1;
					text-align: center;
				}

				&-send {
					border-radius: 50rpx;
					font-size: 32rpx;
					font-weight: 400;
					letter-spacing: 4rpx;
					background-color: #607d8b;
					color: #DDDDDD;
					padding: 12rpx 36rpx;
				}
			}

			&_content {
				height: 250rpx;
				font-size: 28rpx;
				font-weight: 400;
				letter-spacing: 4rpx;
				color: #DDDDDD;
				border-radius: 24rpx;
				background-color: #576069;
				padding: 28rpx;
				width: 90%;
				margin: 24px auto 0;
			}
		}
	}
</style>
